html {
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

html, input {
    font-family:
        "HelveticaNeue-Light",
        "Helvetica Neue Light",
        "Helvetica Neue",
        Helvetica,
        Arial,
        "Lucida Grande",
        sans-serif;
}

@media (min-width: 980px) {
    .header {
        padding: 6px 60px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .title {
        text-align: center;
        font-size: 30px;
    }
    #messageArea {
        position: fixed; /* 屏幕滚动关键 */
        margin: 90px 0;
        width: 100%;
        padding: 0 150px;
        height: 80%;
        overflow-y: scroll; /* 屏幕滚动关键 */
    }
    .input-footer {
        background-color: #f5f5f5;
        padding: 13px 50px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .username {
        font-size: 25px;
        font-weight: bolder;
        margin-right: 30px;
    }
    .input {
        width: 70%;
    }
    .button {
        margin-left: 30px;
        padding: 6px 50px;
    }
}

@media (max-width: 980px) {
    .header {
        padding: 6px 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .title {
        text-align: center;
        font-size: 20px;
    }
    #messageArea {
        position: fixed; /* 屏幕滚动关键 */
        margin: 90px 0;
        width: 100%;
        padding: 0 10px;
        height: 80%;
        overflow-y: scroll; /* 屏幕滚动关键 */
    }
    .input-footer {
        background-color: #f5f5f5;
        padding: 10px 8px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .username {
        font-size: 25px;
        font-weight: bolder;
        overflow: hidden;           /*超过宽度的文本隐藏*/
        white-space: nowrap;        /*规定段落中的文本不进行换行*/
        text-overflow: ellipsis;    /*当元素内文本溢出时显示省略标记（...）*/
    }
    .input {
        width: 70%;
    }
    .button {
        margin-left: 8px;
        padding: 6px 10px;
    }
}